<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册登录界面Ⅰ</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div class="container right-panel-active">
			<!-- 注册 -->

			<div class="container_form container--signup">
				<form action="#" class="form" id="form1">
					<h2 class="form_title">注册</h2>
					<input type="text" placeholder="用户名" class="input" />
					<input type="email" placeholder="邮箱" class="input" />
					<input type="password" placeholder="密码" class="input" />
					<input type="password" placeholder="确认密码" class="input" />
					<button class="btn">注册</button>
				</form>
			</div>
			<!-- 登录 -->
			<div class="container_form container--signin">
				<form action="#" class="form" id="form2">
					<h2 class="form_title">登录</h2>
					<input type="email" placeholder="邮箱" class="input" />
					<input type="password" placeholder="密码" class="input" />
					<a href="#" class="link">忘记密码?</a>
					<button class="btn">登录</button>
				</form>
			</div>
			<!-- 浮层 -->
			<div class="container_overlay">
				<div class="overlay">
					<div class="overlay_panel overlay--left">
						<button class="btn" id="signIn">登录</button>
					</div>
					<div class="overlay_panel overlay--right">
						<button class="btn" id="signUp">注册</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 背景 -->
		<div class="slidershow">
			<div class="slidershow--image" style="background-image: url('https://source.unsplash.com/Snqdjm71Y5s')">
			</div>
			<div class="slidershow--image" style="background-image: url('https://source.unsplash.com/5APj-fzKE-k')">
			</div>
			<div class="slidershow--image" style="background-image: url('https://source.unsplash.com/wnbBH_CGOYQ')">
			</div>
			<div class="slidershow--image" style="background-image: url('https://source.unsplash.com/OkTfw7fXLPk')">
			</div>
		</div>
		<!-- partial -->
		<script>
			const signInBtn = document.getElementById("signIn");
			const signUpBtn = document.getElementById("signUp");
			const firstForm = document.getElementById("form1");
			const secondForm = document.getElementById("form2");
			const container = document.querySelector(".container");
			signInBtn.addEventListener("click", () => {
				container.classList.remove("right-panel-active");
			});
			signUpBtn.addEventListener("click", () => {
				container.classList.add("right-panel-active");
			});
			firstForm.addEventListener("submit", (e) => e.preventDefault());
			secondForm.addEventListener("submit", (e) => e.preventDefault());
			// 获取输入框和表单元素
			const form1 = document.getElementById("form1");
			const form2 = document.getElementById("form2");
			const password = document.querySelectorAll('input[type="password"]');
			const email = document.querySelectorAll('input[type="email"]');
			// 添加密码和邮箱验证事件
			function validatePassword() {
				if (password[0].value.length < 6 || password[0].value.length > 20) {
					alert("密码长度应在6-20个字符之间");
					return false;
				} else if (password[0].value !== password[1].value) {
					alert("两次密码输入不一致，请重新输入");
					return false;
				}
				return true;
			}
			function validateEmail() {
				const emailFormat = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				if (!emailFormat.test(email[0].value) || !emailFormat.test(email[1].value)) {
					alert("请输入正确的邮箱格式");
					return false;
				}
				return true;
			}
			// 监听表单提交事件
			form1.addEventListener("submit", (e) => {
				if (!validatePassword() || !validateEmail()) {
					e.preventDefault();
				}
			});
			form2.addEventListener("submit", (e) => {
				if (!validateEmail()) {
					e.preventDefault();
				}
			});
		</script>
	</body>
</html>